@import "../var";
@import "../mixin";

.browsing-history {
  .gzl-section {
    background-color: $clr-white;
    z-index: 4;
    .history-content {
      overflow: hidden;
    }
  }
}

.list-nav {
  background-color: #f2f2f2;
  z-index: 6;
  .list-nav-inner {
    height: px(44);
    position: relative;
    overflow: hidden;
    z-index: 7;
    .nav-inner-box {
      height: px(60);
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      .tab-list {
        padding: px(0);
        overflow: hidden;
        background-color: #f2f2f2;
        position: relative;
        .tab-item {
          float: left;
          padding: px(9) px(4);
          a {
            display: block;
            height: px(26);
            line-height: px(26);
            text-align: center;
            border-radius: px(26);
            font-size: px(14);
            color: $clr-g3;
            padding: px(0) px(15);
          }
          &.on {
            a {
              color: $clr-g4;
              background-color: $clr-main;
            }
          }
        }
      }
    }
  }
  .list-nav-sel {
    position: absolute;
    right: 0;
    top: 0;
    width: px(44);
    height: px(44);
    background-color: #f2f2f2;
    &:before {
      content: '';
      display: block;
      height: px(44);
      border-left: px(1) solid #979797;
      position: absolute;
      left: px(0);
      transform: scale(.5);
    }
    .nav-sel-inner {
      width: 100%;
      height: 100%;
      position: relative;
      &:after {
        content: " ";
        display: inline-block;
        height: .08rem;
        width: .08rem;
        border-width: 0rem .01rem .01rem 0rem;
        border-color: #979797;
        border-style: solid;
        transform: matrix(.71,.71,-.71,.71,0,0);
        position: absolute;
        top: px(16);
        left: px(1);
        right: px(1);
        margin: auto;
      }
    }
  }
  .list-nav-more {
    position: absolute;
    left: 0;
    right: 0;
    top: px(44);
    background-color: #f2f2f2;
    z-index: 3;
    display: none;
    .more-list {
      padding: px(16) px(4) px(4);
      background-color: #f2f2f2;
      overflow: hidden;
      .more-item {
        float: left;
        width: 25%;
        padding: px(0) px(8);
        margin-bottom: px(8);
        a {
          display: block;
          height: px(30);
          line-height: px(30);
          text-align: center;
          position: relative;
          &:after {
            content: " ";
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 0;
            border: px(1) solid $clr-gc;
            transform: scale(0.5);
            transform-origin: 0 0;
            box-sizing: border-box;
          }
        }
        &.on {
          a {
            background-color: $clr-main;
            color: $clr-g4;
            &:after {
              border: px(1) solid $clr-main;
            }
          }
        }
      }
    }
  }
}

.mask {
  background: $clr-black;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: none;
}

.list-show-bar {
  height: .4rem;
  line-height: .4rem;
  padding: 0rem .16rem;
  background-color: #f2f2f2;
  color: #333;
  position: fixed;
  top: px(43);
  left: px(0);
  right: px(0);
  z-index: 3;
  display: none;
  svg {
    font-size: .2rem;
    position: absolute;
    top: .01rem;
    bottom: .01rem;
    right: .16rem;
    margin: auto;
  }
}

.history-list {
  .history-item {
    .history-title {
      height: px(40);
      line-height: px(40);
      padding: px(0) px(16);
      background-color: #f2f2f2;
      color: $clr-g3;
      position: relative;
      svg {
        font-size: px(20);
        position: absolute;
        top: px(1);
        bottom: px(1);
        right: px(16);
        margin: auto;
      }
    }
  }
}

.history-list-inner {
  .history-item-inner {
    padding: px(16) px(0) px(0) px(16);
    &.gzl-cell {
      &:after {
        z-index: 2;
      }
    }
  }
}

// 列表（滑动）样式
.item-inner-slide {
  position: relative;
  .slide-item {
    height: px(116);
    position: relative;
    background-color: $clr-white;
    display: -webkit-box;
    z-index: 1;
    transform: translateX(0px);
    .img-box {
      width: px(120);
      height: px(100);
      position: relative;
      margin-right: px(8);
      .prod-tag {
        height: px(16);
        line-height: px(16);
        position: absolute;
        top: px(0);
        left: px(0);
        padding: px(0) px(8) px(0) px(4);
        font-size: px(10);
        color: $clr-white;
        border-radius: px(0) px(0) px(16) px(0);
        &.travel {
          background-image: linear-gradient(90deg,#8ad852 2%,#5ec433 100%);
        }
        &.freetravel {
          background-image: linear-gradient(90deg,#ffc942 2%,#ffb606 100%);
        }
        &.localplay {
          background-image: linear-gradient(90deg,#ff7c71 2%,#ff5a59 100%);
        }
        &.cruise {
          background-image: linear-gradient(90deg,#51c7ff 2%,#0ab6ff 100%);
        }
        &.hotel {
          background-image: linear-gradient(90deg,#d5b475 2%,#be9f67 100%);
        }
        &.ticket {
          background-image: linear-gradient(90deg,#29d5d1 2%,#08cac6 100%);
        }
        &.visa {
          background-image: linear-gradient(90deg,#de61d1 2%,#d740c8 100%);
        }
        &.wifi {
          background-image: linear-gradient(90deg,#a897e3 2%,#8b74db 100%);
        }
      }
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .info-box {
      -webkit-box-flex: 1;
      .info-title {
        width: px(231);
        line-height: px(20);
        color: $clr-g3;
        font-size: px(14);
        margin-bottom: px(2);
        padding-right: px(16);
        @include line-clamp(2);
        span {
          font-weight: bold;
        }
      }
      .info-date {
        width: px(231);
        line-height: px(14);
        font-size: px(10);
        color: $clr-g9;
        margin-bottom: px(6);
        padding-right: px(16);
        @include ellipsis();
      }
      .info-msg {
        width: px(231);
        overflow: hidden;
        margin-bottom: px(7);
        padding-right: px(16);
        i {
          width: px(15);
          height: px(15);
          float: left;
          margin-right: px(4);
        }
        .msg-list {
          float: left;
          overflow: hidden;
          .msg-item {
            height: px(15);
            line-height: px(15);
            font-size: px(10);
            color: $clr-g8;
            padding: px(0) px(8);
            margin-right: px(4);
            background-color: $clr-bg;
            border-radius: px(15);
            float: left;
          }
        }
      }
      .info-icon-list {
        min-height: px(16);
        margin-bottom: px(5);
        padding-right: px(16);
        overflow: hidden;
        .info-icon-item {
          height: px(16);
          line-height: px(16);
          font-size: px(12);
          margin-right: px(6);
          float: left;
        }
      }
      .info-address {
        width: px(231);
        line-height: px(14);
        font-size: 0;
        color: $clr-g9;
        margin-bottom: px(11);
        padding-right: px(16);
        overflow: hidden;
        svg {
          font-size: px(10);
          margin-right: px(2);
          display: inline-block;
          vertical-align: middle;
        }
        p {
          width: px(201);
          font-size: px(10);
          display: inline-block;
          vertical-align: middle;
          @include ellipsis();
        }
      }
      .info-describe {
        width: px(231);
        line-height: px(14);
        font-size: px(10);
        color: $clr-g9;
        margin-bottom: px(4);
        @include line-clamp(2);
      }
      .info-precent {
        width: px(80);
        height: px(13);
        line-height: px(11);
        text-align: center;
        font-size: px(10);
        overflow: hidden;
        border: 1px solid #00B7EE;
        border-radius: px(13);
        .info-precent-le {
          width: 50%;
          height: px(13);
          float: left;
          color: $clr-white;
          background-color: #00B7EE;
        }
        .info-precent-ri {
          width: 50%;
          float: left;
          color: #00B7EE;
        }
      }
      .info-count {
        height: px(16);
        position: absolute;
        left: px(128);
        bottom: px(16);
        color: $clr-g9;
        font-size: px(10);
        & > span {
          color: $clr-active;
          font-size: px(14);
          margin-right: px(2);
          & > span {
            color: $clr-active;
            font-size: px(10);
            margin-left: px(2);
          }
        }
      }
      .info-price {
        height: px(21);
        position: absolute;
        right: px(21);
        bottom: px(16);
        color: $clr-active;
        font-size: px(10);
        span {
          font-size: px(18);
          margin-right: px(2);
        }
      }
    }
  }
  .slide-show {
    position: absolute;
    top: 0;
    right: 0;
    ul {
      padding: px(0);
      overflow: hidden;
      li {
        position: relative;
        float: left;
        width: px(60);
        padding: 0;
        &.del-btn {
          background-color: #ffd800;
          color: $clr-main;
        }
        p {
          width: px(28);
          height: px(40);
          line-height: px(20);
          text-align: center;
          position: absolute;
          top: px(1);
          bottom: px(1);
          left: px(1);
          right: px(1);
          margin: auto;
          font-size: px(14);
          color: $clr-g4;
        }
      }
    }
  }
}

.no-more {
  line-height: px(20);
  text-align: center;
  color: $clr-g9;
  font-size: px(14);
  padding: px(20) px(0) px(30);
  position: relative;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: .16rem;
    border-top: 1px solid #eee;
    transform: scaleY(.5);
  }
}

.no-record-box {
  display: none;
  img {
    width: px(294);
    height: px(191);
    display: block;
    margin: px(60) auto px(20);
  }
  p {
    line-height: px(22);
    text-align: center;
    font-size: px(16);
    color: $clr-g3;
    margin-bottom: px(12);
  }
  .back-btn {
    width: px(160);
    line-height: px(36);
    text-align: center;
    font-size: px(16);
    margin: px(0) auto px(12);
    a {
      color: $clr-g4;
    }
  }
}